import QtQuick 2.0
import QtQuick.Controls 2.12

Rectangle{
    id: container
    height: 50
    property var name: "用户名"

    signal exit()
    signal clicked(real x, real y, real witd, real heigh)

    // 返回按钮
    Button{
        id:_closeBtn
        width: height
        height: _text.height
        anchors.left: parent.left
        anchors.top: _text.top
        onClicked: parent.exit()
        background: Canvas {
            anchors.fill: parent

            onPaint: {
                var ctx = getContext("2d");

                // 绘制箭头
                ctx.beginPath();
                ctx.moveTo(width * 0.6, height * 0.2);
                ctx.lineTo(width * 0.4, height * 0.5);
                ctx.lineTo(width * 0.6, height * 0.8);
                ctx.stroke();
            }
        }
    }

    // 用户名
    Text{
        id:_text
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        //anchors.centerIn: parent
        font.pixelSize: 15
        font.family: "Microsoft yahei"
        text: name
    }

    // 三个点
    Button{
        id: selectBubble
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.top: _text.top
        width: 28
        height: _text.height

        onClicked: container.clicked(selectBubble.x, selectBubble.y, selectBubble.width, selectBubble.height)

        background: Rectangle {

            color: "transparent"
            Canvas {
                anchors.fill: parent

                onPaint: { // Context2D
                    var ctx = getContext("2d");
                    var lineBegin = 3
                    ctx.fillStyle ="#444"
                    ctx.lineWidth = 1.5
                    ctx.ellipse(width*0.2 - 2, height/2, 4, 4)
                    ctx.ellipse(width*0.5 - 2, height/2, 4, 4)
                    ctx.ellipse(width*0.8 - 2, height/2, 4, 4)
                    ctx.fill()

                }
            }
         }
    }



}
